<script setup lang="ts">
import type { Settings } from './types';

import { onMounted, ref } from 'vue';

import { Input, message, Popover, Skeleton } from 'ant-design-vue';
import { $t } from '@vben/locales';
import { useVbenForm } from '#/adapter/form';
import { getSettingSite, putSettingSite } from '#/api/admin/setting';

import { defaultSettings, updateSettings } from './hook';

const loading = ref<boolean>(true);

const form = ref<Settings>(defaultSettings);
async function onSubmit(values: Record<string, any>) {
  const { msg } = await putSettingSite(updateSettings(form.value, values));
  message.success(msg);
}

const [Form, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'cdn_static_root',
      label: $t("page.common.CDN Address"),
    },
  ],
});

const onInfo = async () => {
  const { data } = await getSettingSite();
  if (data.site_info) {
    form.value.options = data.site_info;
  }
  if (data.cdn_settings) {
    form.value.cdn_settings = data.cdn_settings;
    formApi.setValues(data.cdn_settings);
  }

  if (data.cmf_settings) {
    form.value.cmf_settings = data.cmf_settings;
  }
  loading.value = false;
};

onMounted(async () => {
  await onInfo();
});
</script>

<template>
  <Skeleton :loading="loading">
    <Form>
      <template #cdn_static_root="slotProps">
        <Input placeholder="请输入" v-bind="slotProps">
          <template #addonAfter>
            <Popover title="设置说明">
              <template #content>
                <div class="help-block">
                  不能以/结尾；设置这个地址后，请将ThinkCMF下的静态资源文件放在其下面；
                  <br />
                  ThinkCMF下的静态资源文件大致包含以下(如果你自定义后，请自行增加)：
                  <br />
                  themes/admin_simplebootx/public/assets
                  <br />
                  static
                  <br />
                  themes/simplebootx/public/assets
                  <br />
                  例如未设置cdn前：jquery的访问地址是/static/js/jquery.js,
                  <br />
                  设置cdn是后它的访问地址就是：静态资源cdn地址/static/js/jquery.js
                </div>
              </template>
              <Button type="link">{{$t('page.common.Setup Instructions')}}</Button>
            </Popover>
          </template>
        </Input>
      </template>
    </Form>
  </Skeleton>
</template>
